<template>
  <div>
    <h1>Icon 图标</h1>
    <p>提供了一套常用的图标集合。</p>
    <h2>如何使用</h2>
    <p>使用 <code>&lt;Icon/&gt;</code> 组件，指定图标对应的 <code>type</code> 属性，示例代码： </p>
    <p> <code> &lt;Icon type=&quot;icon-jiedianguanli&quot;/&gt; </code> </p>
    <p>渲染后为：</p>
    <code> &lt;i class=&quot;iconfont icon-jiedianguanli&quot;&gt;&lt;/i&gt; </code>
    <h2>API</h2>
    <p>Icon props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <h2>单色图标</h2>
    <ul class="use-icon">
      <li v-for="item in monochromeIcon" style="padding:15px 0;">
        <Icon class="show-icon" :type="item.id"></Icon>
        <span style="display:block;padding:10px 0;">{{item.name}}</span>
        {{item.id}}
      </li>
    </ul>
    <h2>多色图标</h2>
    <ul class="use-icon">
      <li v-for="item in multicolorIcon" style="padding:15px 0;">
        <Icon useSvg :type="item.id"></Icon>
        <span style="display:block;padding:10px 0;">{{item.name}}</span>
        {{item.id}}
      </li>
    </ul>
    <h2>外部图标</h2>
    <ul class="use-icon">
      <li v-for="item in outIcon" style="padding:15px 0;">
        <Icon fontFamily="bsc-icon" :useSvg="item.useSvg" :type="item.id"></Icon>
        <span style="display:block;padding:10px 0;">{{item.name}}</span>
        {{item.id}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TestIcon',
  props: {},
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute',
          align: 'center'
        },
        {
          title: '说明',
          key: 'explain',
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '默认值',
          key: 'default',
          align: 'center'
        }
      ],
      tableData: [
        {
          attribute: 'type',
          explain: '图片名称',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'size',
          explain: '图标的大小',
          type: 'Number | String',
          default: '16px'
        },
        {
          attribute: 'color',
          explain: '图标的颜色',
          type: 'String',
          default: '-'
        }
      ],
      monochromeIcon: [
        {
          id: 'icon-basic-data',
          name: '基础数据中心'
        },
        {
          id: 'icon-order-management',
          name: '订单管理中心'
        },
        {
          id: 'icon-log',
          name: '日志'
        },
        {
          id: 'icon-customer-management',
          name: '客户管理中心'
        },
        {
          id: 'icon-full-screen',
          name: '全屏'
        },
        {
          id: 'icon-exit',
          name: '退出'
        },
        {
          id: 'icon-skin',
          name: '皮肤主题'
        },
        {
          id: 'icon-message',
          name: '消息通知'
        },
        {
          id: 'icon-home',
          name: '首页'
        },
        {
          id: 'icon-delete',
          name: '删除'
        },
        {
          id: 'icon-add',
          name: '添加'
        },
        {
          id: 'icon-edit',
          name: '编辑'
        },
        {
          id: 'icon-success',
          name: '成功提示'
        },
        {
          id: 'icon-info',
          name: '信息提示'
        },
        {
          id: 'icon-error',
          name: '错误提示'
        },
        {
          id: 'icon-close-bg',
          name: '关闭1'
        },
        {
          id: 'icon-up',
          name: '向上'
        },
        {
          id: 'icon-down',
          name: '向下'
        },
        {
          id: 'icon-close',
          name: '关闭'
        },
        {
          id: 'icon-search',
          name: '搜索'
        },
        {
          id: 'icon-user',
          name: '用户'
        },
        {
          id: 'icon-password',
          name: '密码'
        },
        {
          id: 'icon-more',
          name: '更多'
        },
        {
          id: 'icon-system',
          name: '系统管理'
        },
        {
          id: 'icon-left-bracket',
          name: '左'
        },
        {
          id: 'icon-double-left',
          name: '左1'
        },
        {
          id: 'icon-right-bracket',
          name: '右'
        },
        {
          id: 'icon-double-right',
          name: '右1'
        },
        {
          id: 'icon-up-bracket',
          name: '上1'
        },
        {
          id: 'icon-down-bracket',
          name: '下1'
        },
        {
          id: 'icon-time',
          name: '时间'
        },
        {
          id: 'icon-date',
          name: '日期'
        },
        {
          id: 'icon-download',
          name: '下载'
        },
        {
          id: 'icon-upload',
          name: '上传'
        },
        {
          id: 'icon-open-menu',
          name: '打开菜单'
        },
        {
          id: 'icon-close-menu',
          name: '收起菜单'
        },
        {
          id: 'icon-ellipsis',
          name: '省略'
        },
        {
          id: 'icon-correct',
          name: '选中'
        },
        {
          id: 'icon-right',
          name: '右'
        },
        {
          id: 'icon-warning',
          name: '警告提示'
        }
      ],
      multicolorIcon: [
        {
          id: 'icon-draft',
          name: '草稿箱'
        },
        {
          id: 'icon-Supplier',
          name: '供应商'
        },
        {
          id: 'icon-Workorder',
          name: '工单'
        },
        {
          id: 'icon-message3',
          name: '消息'
        },
        {
          id: 'icon-task',
          name: '任务'
        },
        {
          id: 'icon-Customer',
          name: '客户'
        }
      ],
      outIcon: [
        {
          id: 'iconzuo',
          name: '左',
          useSvg: false
        },
        {
          id: 'iconyou',
          name: '右',
          useSvg: false
        },
        {
          id: 'icondaochu',
          name: '导出',
          useSvg: false
        },
        {
          id: 'icondianziqianshu',
          name: '电子签署',
          useSvg: false
        },
        {
          id: 'iconrenzheng',
          name: '认证',
          useSvg: true
        },
        {
          id: 'iconzhanghaojiesuan',
          name: '账号结算',
          useSvg: true
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
  h1{
    font-size: 20px;
    padding: 10px 0;
  }
  p{
    padding: 10px 0;
  }
  h2{
    padding: 10px 0;
    font-size: 15px;
  }
  code{
    background-color: #aaaaaa;
  }
  .use-icon{
    display: flex;
    width:100%;
    flex-wrap: wrap;
  }
  li{
    margin: 10px;
    width:216px;
    text-align: center;
  }
  .show-icon {
    display: block;
    text-align: center;
  }
</style>
